<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
</head>
<body>
   <!--
     <div id="app">
        {{otherMsg()}}
        <!--
            <div v-model="ht">
            <img :src="imgSrc" alt="" height="600" width="500">
            <a :href="url">百度一下，你就知道它的奇妙</a>
            <button @click="handleClick">吃土</button>
        </div>
        
        
    </div>

    <script src="https:/cdn.jsdelivr.net/npm/vue"></script>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                msg:"鹿王梵音",
                ht:"<h1>这是九色鹿的故事</h1>",
                imgSrc:"img/a5beac2e4d06b20.jpg",
                url:"http://baidu.com"
            },
            computed:{
                newMsg:function(){
                    return this.msg+"我吃土我快乐。我快乐我就去吃土！！";
                }
            },
            filters:{
                formatString:function(val){
                    return  val+"日常吃土";
                }
            },
            methods:{
                handleClick:function(){
                    console.log("你点击了这个按钮，你就注定要花钱！！！");
                },
                otherMsg:function(){
                    return this.msg+"别说了，就是穷！！！"
                }
            },
            mounted: function (){
                console.log('它降价了！！！'+new Date().toLocaleString());
            },
            created:function(){
                console.log('它涨价了！！！'+new Date().toTimeString());
            }
        })
    </script>
   -->

   <div id="app">
    <ul>
        <li v-for="(f,index) of vagetableSort">{{ index+1 }}-{{ f.name }}-{{ f.price }}</li>
    </ul>
    <ul>
        <li v-for="(u,key,index) in user">{{ index }}-{{ key }}-{{ u }}</li>
    </ul>
   </div>

   <script src="https://cdn.jsdelivr.net/npm/vue"></script>

   <script>
       var app=new Vue({
           el:'#app',
           data:{
               age:18,
               vagetables:[
                   {name:'娃娃菜',price:2},
                   {name:'山药',price:1},
                   {name:'西红柿',price:3},
                   {name:'竹笋',price:5},
                   {name:'土豆',price:3},
                   {name:'四季豆',price:2},
                   {name:'茄子',price:3}
               ],
               user:{
                   username:'admin',
                   password:'123456',
                   telphone:'10086111111'
               }
           },
           computed:{
               newMsg:function(){
                   return this.msg+"多吃蔬菜身体好！！！"
               },
               bgcolorCls:function(){
                   return this.hasColor?'bgcolor':''
               },
               clsProp:function(){
                   return{
                       bgcolor:this.hasColor,
                       forecolor:this.hasNum
                   }
               },
               vagetableSort:function(){
                   return this.vagetables.sort(function(a,b){
                       return a.price-b.price;
                   })
               }
           },
           filters:{
               formatString:function(val){
                   return val+"天天吃菜~";
               }
           },
           methods:{
                handleClick:function(){
                    console.log("你点击了这个按钮，你就注定要花钱！！！");
                },
                otherMsg:function(){
                    return this.msg+"别说了，就是穷！！！"
                }
            },
            mounted: function (){
                console.log('它降价了！！！'+new Date().toLocaleString());
            },
            created:function(){
                console.log('它涨价了！！！'+new Date().toTimeString());
            }
        })
   </script>
</body>
</html>